<template>
	<view class="bb">
		<view>
			<view>收货人</view>
			<input :class="sel==1?'a':''"  type="text"  v-model="shouhuoren"	@focus="a(1)"/>
		</view>
		<view>
			<view>联系电话</view>
			<input :class="sel==2?'a':''" type="text" v-model="tel"	@focus="a(2)"/>
		</view>
		<view>
			<view>所在地区</view>
			<picker mode="region" 	@change="getdizhi">
			<view>选择所在地区
			<text class="iconfont icon-youjiantou"></text>
			</view>
			</picker>
		</view>
		<view>
			<view>
				详细地址
			</view>
				<input :class="sel==3?'a':''" type="text" v-model="xiangxidizhi"	@focus="a(3)"/>
			
			
		</view>
		<view>
			<view>设置为默认地址</view>
			<switch name="switch"  @change="Change"/>
		</view>
		<button type="warn" @click="show">保存</button>
	</view>
	
</template>
<script>
import{toRefs,onMounted,reactive,computed} from'vue'
import http from'../../utils/http.js'
import store from '../../store/index.js'
export default{
	setup(){
		let data=reactive({
			shouhuoren:'',
			tel:'',
			dizhi:'',
			sel:0,
			ismoren:0,
			xiangxidizhi:'',
			getdizhi:(ev)=>{
				let newdizhi=ev.detail.value.join("")
				data.dizhi=newdizhi
			},
			a:(a)=>{
				data.sel=a
			},
			Change:(e)=>{
				if(e.detail.value){
					data.ismoren=1
				}else{
					data.ismoren=0
				}
			},
			show:()=>{
				if(data.shouhuoren!=''&&data.tel!=''&&data.dizhi!=''){
					http({
						url:'/SetBasic/xincundizhi',
						method:'post',
						data:{
							shouhuoren:data.shouhuoren,
							tel:data.tel,
							dizhi:data.dizhi,
							ismoren:data.ismoren,
							xiangxidizhi:data.xiangxidizhi,
							id:store.state.userID
						}
					}).then((res)=>{
						uni.showToast({
							title:'保存成功',
							duration:1500
						})
					})
				}else{
					uni.showToast({
						icon:'error',
						title:'请输入完整信息',
						duration:1500
					})
				}
			
			}
		})
		
		return{...toRefs(data)}
	}
}
</script>

<style lang="less">
	@import url("~@/static/fonts/iconfont.css");
	.a{
		outline: 1rpx solid #CFD1D2;
	}
	.bb{
		>button{
			margin: 100rpx 100rpx;
		}
		
		padding: 30rpx 30rpx;
		&>view{
			view{
				color: #5F5F5F;
				padding: 10rpx;
			}
			margin: 30rpx 0;
			display: flex;
			justify-content: space-between;
			input{
				margin-left: 30rpx;
				width: 450rpx;
				padding: 10rpx;
			}
			&:nth-child(3){
				margin: 35rpx 0;
			}
		}
	}
</style>
